<template>
	<div class="wrapper">
		<header>
			<img src="../assets/header.png" />
			<div class="left"></div>
			<div class="right">
				<i class="fa fa-clock-o"></i>
				2022-10-15 12:23:34
			</div>
		</header>
		<div class="main">
			<aside>
				<div class="grid-box">
					<ul>
						<li>
							<h4>全国省网格覆盖率(%)</h4>
							<div>
								<GaugeChart gaugecolor="#67C23A" :gaugedata="provinceCoverage"></GaugeChart>
							</div>
						</li>
						<li>
							<h4>全国大城市网格覆盖率(%)</h4>
							<div>
								<GaugeChart gaugecolor="#F56C6C" :gaugedata="cityCoverage"></GaugeChart>
							</div>
						</li>
					</ul>
				</div>
				<div>
					<!-- 饼图 -->
					<PieChart :piedata="pieDataArr"></PieChart>
				</div>
				<div>
					<!-- 折线图 -->
					<LineChart :monthdata="monthData" :totaldata="totalData"></LineChart>
				</div>
			</aside>
			<section>
				<div class="map">
					<!-- 地图 -->
					<ChinaMap :mapArrData="mapDataArr"></ChinaMap>
				</div>
				<div class="statistics">
					<h3>空气质量检测实时统计</h3>
					<ul>
						<li>
							<i class="fa fa-user-o"></i>
							<div>
								<h4>{{aqiCount}}</h4>
								<p>空气质量检测总数量</p>
							</div>
						</li>
						<li>
							<i class="fa fa-sun-o"></i>
							<div>
								<h4>{{aqiGoodCount}}</h4>
								<p>空气质量良好数量</p>
							</div>
						</li>
						<li>
							<i class="fa fa-life-ring"></i>
							<div>
								<h4>{{aqiCount-aqiGoodCount}}</h4>
								<p>空气质量污染数量</p>
							</div>
						</li>
					</ul>
				</div>
			</section>
			<article>
				<!-- 柱状图 -->
				<div>
					<BarChart bartext="悬浮颗粒物（PM2.5）浓度超标累计" barcolor="#409EFF" :namedata="provinceNameData" :valuedata="spmValueData"></BarChart>
				</div>
				<div>
					<BarChart bartext="二氧化硫（SO2）浓度超标累计" barcolor="#67C23A" :namedata="provinceNameData" :valuedata="so2ValueData"></BarChart>
				</div>
				<div>
					<BarChart bartext="一氧化碳（CO）浓度超标累计" barcolor="#F56C6C" :namedata="provinceNameData" :valuedata="coValueData"></BarChart>
				</div>
			</article>
		</div>
	</div>
</template>

<script setup>
	import LineChart from "../components/LineChart.vue";
	import BarChart from "../components/BarChart.vue";
	import GaugeChart from "../components/GaugeChart.vue";
	import PieChart from "../components/PieChart.vue";
	import ChinaMap from "../components/ChinaMap.vue";

	import axios from "axios";
	import {
		ref
	} from "vue";
	//设置共通的基础URL
	axios.defaults.baseURL = 'http://localhost:8888/nepm/';

	//柱状图需要的数据
	const provinceNameData = ref([]);
	const so2ValueData = ref([]);
	const coValueData = ref([]);
	const spmValueData = ref([]);


	//仪表盘需要的数据
	const provinceCoverage = ref([]);
	const cityCoverage = ref([]);

	//饼图的数据
	const pieDataArr = ref([]);

	// 折线图的数据
	const monthData = ref([]);
	const totalData = ref([]);

	//地图的数据
	const mapDataArr = ref([]);

	// 空气质量检测总数量
	const aqiCount = ref({});
	const aqiGoodCount = ref({});

	const init = () => {
		//1.省分组分项数据统计
		axios.post('statistics/listProvinceItemTotalStatis')
			.then((response) => {
				// 数据初始化
				provinceNameData.value.length = 0;
				so2ValueData.value.length = 0;
				coValueData.value.length = 0;
				spmValueData.value.length = 0;
				mapDataArr.value.length = 0;
				let arr = response.data;
				//console.log(arr);
				for (let i = 0; i < arr.length; i++) {
					provinceNameData.value.push(arr[i].provinceAbbr);
					so2ValueData.value.push(arr[i].so2Total);
					coValueData.value.push(arr[i].coTotal);
					spmValueData.value.push(arr[i].spmTotal);
					mapDataArr.value.push({
						name: arr[i].provinceName,
						value: arr[i].aqiTotal
					});
				}
			}).catch((error) => {
				console.log(error);
			});
		//2.省网格覆盖率
		axios.post('statistics/getProvinceCoverage')
			.then((response) => {
				provinceCoverage.value.length = 0;
				provinceCoverage.value.push({
					value: response.data
				});
			}).catch((error) => {
				console.log(error);
			});
		//3.市网格覆盖率
		axios.post('statistics/getCityCoverage')
			.then((response) => {
				cityCoverage.value.length = 0;
				cityCoverage.value.push({
					value: response.data
				});
			}).catch((error) => {
				console.log(error);
			});
		//4.AQI指数级别分布
		axios.post('statistics/listAqiDistributeTotalStatis')
			.then((response) => {
				pieDataArr.value.length = 0;
				let arr = response.data;
				for (let i = 0; i < arr.length; i++) {
					pieDataArr.value.push({
						value: arr[i].total,
						name: arr[i].aqiExplain.substr(0, 2)
					});
				}
			}).catch((error) => {
				console.log(error);
			});
		//5.12个月的AQI超标趋势统计信息
		axios.post('statistics/listAqiTrendTotalStatis')
			.then((response) => {
				// 数据初始化
				monthData.value.length = 0;
				totalData.value.length = 0;
				let arr = response.data;
				console.log(arr);
				for (let i = 0; i < arr.length; i++) {
					monthData.value.unshift(arr[i].month.substr(5,7));
					totalData.value.unshift(arr[i].total);
				}
			}).catch((error) => {
				console.log(error);
			});
		//6.空气质量检测总数量
		axios.post('statistics/getAqiCount')
			.then((response) => {
				aqiCount.value = response.data;
			}).catch((error) => {
				console.log(error);
			});
		//7.空气质量检测良好数量
		axios.post('statistics/getAqiGoodCount')
			.then((response) => {
				aqiGoodCount.value = response.data;
			}).catch((error) => {
				console.log(error);
			});

	};
	init();

	//使用轮巡策略来保证可视化大屏数据的实时性（10秒）
	/* setInterval(()=>{
		init();
	},10000); */
</script>

<style scoped>
	.wrapper {
		width: 100%;
		height: 100%;
		background-color: #001432;

		display: flex;
		flex-direction: column;
	}

	header {
		width: 100%;
		font-weight: 300;
		color: #aaf9fc;
		position: relative;

		display: flex;
		justify-content: space-between;

		flex: 0 0 2vw;
	}

	header img {
		display: block;
		width: 100%;
	}

	header div {
		position: absolute;
		font-size: 1vw;
	}

	header .left {
		left: 20px;
		top: 0.9vw;
	}

	header .right {
		right: 20px;
		top: 0.9vw;
	}

	.main {
		flex: 1;
		width: 100%;
		display: flex;
	}

	.main aside,
	.main article {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.main aside div,
	.main article div {
		flex: 1;
	}

	.main section {
		flex: 0 0 44%;
		display: flex;
		flex-direction: column;
	}

	.main section .map {
		flex: 3;
	}

	.main section .statistics {
		flex: 1;
		overflow: hidden;
	}

	.main aside .grid-box ul {
		width: 100%;
		height: 100%;
		display: flex;
	}

	.main aside .grid-box ul li {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.main aside .grid-box ul li h4 {
		flex: 1;
		text-align: center;
		color: #fff;
		font-size: 14px;
	}

	.main aside .grid-box ul li div {
		flex: 4;
	}

	.main section .statistics h3 {
		text-align: center;
		font-size: 14px;
		color: #fff;
		margin-top: 20px;
	}

	.main section .statistics ul {
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
		color: #fff;
	}

	.main section .statistics ul li {
		display: flex;
		align-items: center;
	}

	.main section .statistics ul li .fa {
		font-size: 36px;
		color: #32ccee;
		margin-right: 10px;
	}

	.main section .statistics ul li div h4 {
		font-size: 26px;
	}

	.main section .statistics ul li div p {
		font-size: 14px;
		margin-top: 3px;
	}

	.main div {
		box-sizing: border-box;
		/******************* 隐藏白线 *******************/
		border: 0px solid #FFFFFF;
	}
</style>
